<jsp:directive.page contentType="text/html;charset=utf-8"
  language="java" session="false" isELIgnored="true" />

<!DOCTYPE html>
<html>
<head>

<META http-equiv="Content-Type" content="text/html;charset=utf-8" />

<link rel="stylesheet" type="text/css" href="css/application-ext.min.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<!--[if IE]><script language="javascript" type="text/javascript" src="js/ext/excanvas.min.js"></script><![endif]-->

<script type="text/javascript" src="js/application-ext.min.js"></script>


<% if (request.getParameter("debug")!=null) { %>

<link rel="stylesheet" type="text/css" href="css/main.css" />

<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/static_game_data.js"></script>
<script type="text/javascript" src="js/initialization.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<% } else { %>

<link rel="stylesheet" type="text/css" href="css/application.min.css" />

<script type="text/javascript" src="js/application.min.js"></script>

<%} %>

<title>Advanced Civilization Aid</title>

</head>

<body>

<form id="manage-civilization-form" style="display: none">
<table class="civilization-manage-table">
	<tr>
		<td>Player name</td>
		<td><input id="manage-civilization-name" size="20" maxlength="20" /></td>
	</tr>
</table>
<table class="civilization-manage-final-points-table">
	<tr>
		<td>AST value</td>
		<td><select id="manage-civilization-ast-value" name="astvalue" size="1">
			<option value="0" selected="selected">0</option>
			<option value="800">800</option>
			<option value="900">900</option>
			<option value="1000">1000</option>
			<option value="1100">1100</option>
			<option value="1200">1200</option>
			<option value="1300">1300</option>
			<option value="1400">1400</option>
			<option value="1500">1500</option>
			<option value="1600">1600</option>
			<option value="1700">1700</option>
			<option value="1800">1800</option>
		</select></td>
	</tr>
	<tr>
		<td>Cities</td>
		<td><select id="manage-civilization-cities" name="cities" size="1">

			<option value="0" selected="selected">0</option>
			<option value="50">1</option>
			<option value="10">2</option>
			<option value="150">3</option>
			<option value="200">4</option>
			<option value="250">5</option>
			<option value="300">6</option>
			<option value="350">7</option>
			<option value="400">8</option>
			<option value="450">9</option>
			<option value="500">10</option>

		</select></td>
	</tr>
	<tr>
		<td>Treasury</td>
		<td><input id="manage-civilization-treasury" name="treasury" size="4" maxlength="4" value="0" /></td>
	</tr>
	<tr>
		<td>Trade goods</td>
		<td><input id="manage-civilization-trade-goods" name="tradegoods" size="4" maxlength="4" value="0" /></td>
	</tr>


</table>
</form>

<form id="buy-cards-form" style="display: none">
<div id="buy-cards-container"></div>
</form>

<div id="buy-cards-dialog" title="Buy cards" style="display: none">
<table>
	<tr>
		<td style="width: 100%; float: left">New cards cost:</td>
		<td class="civilization-card-value" id="new-total-cost">0</td>
	</tr>
	<tr>
		<td style="width: 100%; float: left">New total points:</td>
		<td class="civilization-card-value" id="new-total-points">0</td>
	</tr>
	<tr>
		<td colspan="2"><br />
		</td>
	</tr>
	<tr>
		<td style="width: 100%; float: left">Current points:</td>
		<td class="civilization-card-value" id="current-points">0</td>
	</tr>
</table>
</div>

<div id="network-dialog" title="Join/create network game" style="display: none">
<table>
	<tr>
		<td style="width: 100%; float: left">Game identification:</td>
		<td><input id="game-id" size="20" maxlength="20" /></td>
	</tr>
	<tr>
		<td style="width: 100%; float: left">Password:</td>
		<td><input id="game-password" size="20" maxlength="20" /></td>
	</tr>
	<tr>
		<td colspan="2"><br />
		</td>
	</tr>
	<tr>
		<td colspan="2" id="connection-status-text" style="width: 100%; text-align: center;"></td>
	</tr>

</table>
</div>


<div id="message-dialog" title="Information" style="display: none">
<div id="message-text" style="width: 100%; text-align: center;"></div>
</div>


<!-- main ui starts -->

<div class="progress-icon" id="progress-field"><img src="images/ajax-loader.gif" alt="" /></div>

<div id="main-ui" style="display: none">

<div id="tabs">

<ul>
	<li><a href="#results-tab">Results</a></li>
	<li><a href="#buy-cards-tab">Civilization cards</a></li>
	<li><a href="#manage-civilizations-tab">Manage civilizations</a></li>
	<li>
	<div style="width: 30px"></div>
	</li>
	<li>
	<button type="button" id="connect-button"></button>
	</li>
	<li>
		<div class="session-created-date" id="session-created-date"></div>
	</li>

</ul>


<div id="results-tab">

<div style="width: 100%; align: right; text-align: right"><input type="checkbox" id="results-refresh-button" style="display: none;"
	title="Automatic results refresh" /></div>
<table class="civilization-results-table" id="results-container">
	<tr>
		<td></td>
	</tr>
</table>

<button type="button" id="show-results-chart-button" style="display: none">Chart</button>

<div id="results-chart-title" class="results-chart-title" style="display: none;"></div>
<div id="results-chart" style="margin-top: 10px; width: 100%; height: 300px; display: none;"></div>

<div id="chart-tooltip" class="chart-tooltip" style="position: absolute; display: none;"></div>
</div>

<div id="buy-cards-tab">
<div id="buy-cards-accordion"></div>
</div>

<div id="manage-civilizations-tab">
<div id="manage-civilizations-accordion"></div>
</div>

</div>

</div>

<!-- main ui ends -->

</body>
</html>